<template>
  <view class="content p-2.5">
    <view class="content_box">
      <view class="bg-[#fff] p-2.5 mb-3.5 rounded-[20rpx]">
        <!-- <u--textarea v-model="params.name" border="none" placeholder="请填写商品名称..."></u--textarea> -->
        <u--form labelPosition="left" :model="params" ref="uForm" labelWidth="120">
          <u-form-item label="核查结果" prop="examinersResultName" borderBottom ref="item1" @click="showResult = true">
            <u--input v-model="params.examinersResultName" disabled disabledColor="#ffffff" placeholder="请选择核查结果" border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="核查图片" prop="examinersImg" borderBottom ref="item1">
            <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" :maxSize="10 * 1024 * 1024" @oversize="oversize"></u-upload>
          </u-form-item>
          <u-form-item label="核查视频" prop="examinersVideo" borderBottom ref="item1">
            <u-upload v-if="showBut" :fileList="fileList2" @afterRead="afterRead" @delete="deleteVideo" name="2" multiple :maxCount="1" :maxSize="50 * 1024 * 1024" @oversize="oversize2" accept="video"></u-upload>
            <video v-else style="width: 300rpx;height: 200rpx;" id="myVideo" :play-strategy="2" :src="params.examinersVideoUrl" :page-gesture="true" :enable-play-gesture="true" enable-danmu :controls="true" :loop="true"></video>
          </u-form-item>
          <u-form-item label="核查报告" prop="examinersReport" borderBottom ref="item1">
            <!-- <u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deleteReport" name="3" multiple :maxCount="1" :maxSize="10 * 1024 * 1024" @oversize="oversize" accept="file"></u-upload> -->
            <u--textarea v-model="params.examinersReport" placeholder="请输入核查报告"></u--textarea>
          </u-form-item>

          <u-form-item label="头部健康(是/否)" prop="head" borderBottom ref="item1">
            <u-radio-group v-model="params.head" placement="row">
              <view style="margin-top: 8px;display: flex;justify-content: space-evenly;flex: 1;">
                <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in healthList" :key="index" :label="item.dictLabel" :name="item.dictValue">
                </u-radio>
              </view>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="描述具体情况" prop="examinersResultName" borderBottom ref="item1" v-if="params.head == '0'">
            <u--input v-model="params.headInfo" disabledColor="#ffffff" placeholder="请描述具体情况" border="none"></u--input>
          </u-form-item>
          <u-form-item label="手部健康(是/否)" prop="hand" borderBottom ref="item1">
            <u-radio-group v-model="params.hand" placement="row">
              <view style="margin-top: 8px;display: flex;justify-content: space-evenly;flex: 1;">
                <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in healthList" :key="index" :label="item.dictLabel" :name="item.dictValue">
                </u-radio>
              </view>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="描述具体情况" prop="examinersResultName" borderBottom ref="item1" v-if="params.hand == '0'">
            <u--input v-model="params.handInfo" disabledColor="#ffffff" placeholder="请描述具体情况" border="none"></u--input>
          </u-form-item>
          <u-form-item label="腿部健康(是/否)" prop="leg" borderBottom ref="item1">
            <u-radio-group v-model="params.leg" placement="row">
              <view style="margin-top: 8px;display: flex;justify-content: space-evenly;flex: 1;">
                <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in healthList" :key="index" :label="item.dictLabel" :name="item.dictValue">
                </u-radio>
              </view>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="描述具体情况" prop="examinersResultName" borderBottom ref="item1" v-if="params.leg == '0'">
            <u--input v-model="params.legInfo" disabledColor="#ffffff" placeholder="请描述具体情况" border="none"></u--input>
          </u-form-item>
          <u-form-item label="尾巴健康(是/否)" prop="tail" borderBottom ref="item1">
            <u-radio-group v-model="params.tail" placement="row">
              <view style="margin-top: 8px;display: flex;justify-content: space-evenly;flex: 1;">
                <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in healthList" :key="index" :label="item.dictLabel" :name="item.dictValue">
                </u-radio>
              </view>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="描述具体情况" prop="examinersResultName" borderBottom ref="item1" v-if="params.tail == '0'">
            <u--input v-model="params.tailInfo" disabledColor="#ffffff" placeholder="请描述具体情况" border="none"></u--input>
          </u-form-item>
          <u-form-item label="背部健康(是/否)" prop="back" borderBottom ref="item1">
            <u-radio-group v-model="params.back" placement="row">
              <view style="margin-top: 8px;display: flex;justify-content: space-evenly;flex: 1;">
                <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in healthList" :key="index" :label="item.dictLabel" :name="item.dictValue">
                </u-radio>
              </view>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="描述具体情况" prop="examinersResultName" borderBottom ref="item1" v-if="params.back == '0'">
            <u--input v-model="params.backInfo" disabledColor="#ffffff" placeholder="请描述具体情况" border="none"></u--input>
          </u-form-item>
          <u-form-item label="腹部健康(是/否)" prop="abdominal" borderBottom ref="item1">
            <u-radio-group v-model="params.abdominal" placement="row">
              <view style="margin-top: 8px;display: flex;justify-content: space-evenly;flex: 1;">
                <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in healthList" :key="index" :label="item.dictLabel" :name="item.dictValue">
                </u-radio>
              </view>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="描述具体情况" prop="examinersResultName" borderBottom ref="item1" v-if="params.abdominal == '0'">
            <u--input v-model="params.abdominalInfo" disabledColor="#ffffff" placeholder="请描述具体情况" border="none"></u--input>
          </u-form-item>
        </u--form>
      </view>
    </view>
    <view class="agreement">上传后将不可修改</view>
    <view class="but" v-if="showBut">
      <u-button color="#f56c6c" type="primary" @click="handleSend" text="上传核查结果"></u-button>
    </view>
    <!-- 核查结果 -->
    <u-picker :show="showResult" :columns="examinersResultList" keyName="dictLabel" @cancel="showResult = false" @confirm="handleRecharge"></u-picker>
  </view>
</template>
<script>
import {
  submitResultApi,
  getOrderApi,
  getDictTypeApi,
} from "@/sheep/api/index";
import { baseUrl } from "@/sheep/request/baseUrl";

export default {
  name: "index",
  data() {
    return {
      examinersResultList: [],
      showResult: false,
      fileList1: [],
      fileList2: [],
      fileList3: [],
      params: {
        examinersResult: "",
        examinersResultName: "",
        examinersImg: null,
        examinersVideo: null,
        examinersReport: null,
        head: "1",
        hand: "1",
        leg: "1",
        tail: "1",
        back: "1",
        abdominal: "1",
        headInfo: "",
        handInfo: "",
        legInfo: "",
        tailInfo: "",
        backInfo: "",
        abdominalInfo: "",
      },
      orderId: null,
      showBut: true,

      healthList: [],
    };
  },
  onShow() {},
  onLoad(options) {
    this.getTypeList();
    this.getHealthList();
    if (options?.orderId) {
      this.orderId = options?.orderId;
      getOrderApi(this.orderId).then((res) => {
        if (res.data.status != 3) {
          this.params = res.data;
          this.fileList1.push({
            url: res.data.examinersImgUrl,
            ossId: res.data.examinersImg,
          });
          this.fileList2.push({
            url: res.data.examinersVideoUrl,
            ossId: res.data.examinersVideo,
          });
          // this.fileList3.push({
          //   url: res.data.examinersReportUrl,
          //   ossId: res.data.examinersReport,
          // });
          this.examinersResultList[0].forEach((item) => {
            if (res.data.examinersResult == item.dictValue) {
              this.params.examinersResultName = item.dictLabel;
            }
          });
          // console.log(this.params.examinersResultName);
        }
        this.showBut = res.data.status == 3;
      });
    }
  },
  methods: {
    // 文件超出大小限制
    oversize() {
      uni.showToast({
        title: "上传最大不能超过10M",
        icon: "none",
      });
    },
    oversize2() {
      uni.showToast({
        title: "上传最大不能超过50M",
        icon: "none",
      });
    },
    async getTypeList() {
      let res = await getDictTypeApi("examiners_result");
      this.examinersResultList = [res.data];
    },
    async getHealthList() {
      let res = await getDictTypeApi("examiners_desc");
      this.healthList = res.data;
    },
    handleRecharge(e) {
      this.params.examinersResultName = e.value[0].dictLabel;
      this.params.examinersResult = e.value[0].dictValue;
      this.showResult = false;
    },
    handleSend() {
      if (this.fileList1.length == 0) {
        uni.showToast({
          title: "请上传核查图片",
          icon: "none",
        });
        return;
      }
      if (this.fileList2.length == 0) {
        uni.showToast({
          title: "请上传核查视频",
          icon: "none",
        });
        return;
      }
      if (!this.params.examinersReport) {
        uni.showToast({
          title: "请输入核查报告",
          icon: "none",
        });
        return;
      }
      if (!this.params.examinersResultName) {
        uni.showToast({
          title: "请填写核查结果",
          icon: "none",
        });
        return;
      }
      if (Array.isArray(this.fileList1)) {
        if (this.fileList1.length > 0) {
          this.fileList1.forEach((item, index) => {
            if (index === 0) {
              this.params.examinersImg = item.ossId;
            } else {
              this.params.examinersImg =
                this.params.examinersImg + "," + item.ossId;
            }
          });
        } else {
          this.params.examinersImg = "";
        }
      }
      if (Array.isArray(this.fileList2)) {
        if (this.fileList2.length > 0) {
          this.fileList2.forEach((item, index) => {
            if (index === 0) {
              this.params.examinersVideo = item.ossId;
            } else {
              this.params.examinersVideo =
                this.params.examinersVideo + "," + item.ossId;
            }
          });
        } else {
          this.params.examinersVideo = "";
        }
      }
      // if (Array.isArray(this.fileList3)) {
      //   if (this.fileList3.length > 0) {
      //     this.fileList3.forEach((item, index) => {
      //       if (index === 0) {
      //         this.params.examinersReport = item.ossId;
      //       } else {
      //         this.params.examinersReport =
      //           this.params.examinersReport + "," + item.ossId;
      //       }
      //     });
      //   } else {
      //     this.params.examinersReport = "";
      //   }
      // }
      uni.showLoading({});
      this.params.orderId = this.orderId;
      submitResultApi(this.params).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        if (res.code == 200) {
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/examiners/examiners",
            });
          }, 1000);
        }
      });
    },
    // 上传图片
    async afterRead(event) {
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item, index) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url, lists, event);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result.url,
            name: result.fileName,
            ossId: result.ossId,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url, lists, event) {
      let token = uni.getStorageSync("token");
      let headerToken = "Bearer " + token;
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: baseUrl + "/resource/oss/upload",
          filePath: url,
          name: "file",
          header: {
            Authorization: headerToken,
            clientId: "be7052a7e4f802c20df10a8d131adb12",
          },
          formData: {
            user: "test",
          },
          success: (res) => {
            let data = JSON.parse(res.data);
            if (data.code == 200) {
              resolve(data.data);
            } else {
              if (lists.length > 0) {
                lists.map((item, index) => {
                  this[`fileList${event.name}`].splice(index, 1);
                });
              }
              uni.showToast({
                title: data.msg,
                icon: "none",
              });
            }
          },
        });
      });
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    deleteVideo(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    deleteReport(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  background-color: #f5f5f5;
  height: 100vh;
  .agreement {
    width: 100%;
    text-align: center;
    color: #999999;
    font-size: 22rpx;
    margin-top: 10rpx;
  }
  .but {
    margin-top: 40rpx;
  }
}
.release {
  width: 100rpx;
  height: 70rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  background-color: #3c9cff;
  color: #ffffff;
}

// 支付弹层
.pay {
  padding: 30rpx;

  .pay-title {
    font-size: 35rpx;
  }

  .pay-select {
    margin: 50rpx;
  }

  .pay-flex {
    display: flex;
    margin-top: 30rpx;

    ::v-deep .u-button {
      height: 84rpx !important;
      font-size: 30rpx;

      &:first-child {
        margin-right: 25rpx !important;
      }
    }
  }

  .surplus {
    margin-top: 35rpx;
    font-size: 25rpx;

    .surplus-num {
      margin-left: 15rpx;
    }
  }
}
</style>
